<template>
  <div>
    <van-nav-bar title="排行" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <div class="flex-col top-wrapper">
      <div class="flex-col list-wrapper">
        <span class="text_1">排行榜</span>
        <div class="flex-col group_4">
          <div class="text-wrapper flex-col" v-for="obj in topList" :key="obj.id">
            <span class="text_2" v-for="(obj,index) in songList.slice(0,3)" :key="obj.id"><span>{{index + 1}}. </span>{{ obj.name}}</span>
            <img :src="obj.coverImgUrl" alt="">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { topListAPI, listDetailsAPI } from '@/api/'
export default {
  data () {
    return {
      topList: [],
      songList: []
    }
  },
  async created () {
    const res = await topListAPI({
      limit: 6
    })
    console.log(res)
    this.topList = res.data.list
    console.log(this.topList)

    const res2 = await listDetailsAPI({
      limit: 3,
      id: this.topList[0].id
    })
    console.log(res2)
    this.songList = res2.data.playlist.tracks
  }

}
</script>

<style lang="scss" scoped>
.van-nav-bar{
  background-color: rgba(0, 0, 0, 0);
}

.top-wrapper {
  padding: 19px 13px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  .list-wrapper {
    margin-top: 27.5px;
    .text_1 {
      color: rgb(0, 0, 0);
      font-size: 16px;
      font-weight: 500;
      line-height: 16.5px;
      white-space: nowrap;
    }
    .group_4 {
      margin-top: 10.5px;
      color: rgb(0, 0, 0);
      font-size: 12px;
      line-height: 24px;
      .text-wrapper {
        position: relative;
        margin-bottom: 10px;
        padding: 8px 0 13.5px;
        height: 120px;
        border-radius: 13.5px;
        background-color: rgba(255, 255, 255, 0.507);
        img{
          position: absolute;
          right: 10px;
          width: 110px;
          height: 100px;
          border-radius: 10px;
        }
        .text_2 {
          font-weight:700;
          margin:8px 0 0 25px;
          width: 210.5px;
        }
      }
    }
  }
}
</style>